<template lang="pug">
    #app
        .box-start
            .spinner
                .double-bounce
                .double-bounce

</template>
<script>
    export default {
        name: 'App',
        data () {
            return {};
        }
    };
</script>
<style lang="sass" scoped>
    #app
        display: flex
        align-items: center
        justify-content: center
        height: 100vh
        // background: linear-gradient(to right, rgb(49, 71, 85), rgb(38, 160, 218))
        color: #fff
        .loading-gif
            width: 80px
        .box-start
            width: available
            font-size: 30px
            text-align: center
        // p
            line-height: 60px
        .spinner
            width: 100px
            height: 100px
            position: relative
            margin: 0 auto

        .double-bounce
            width: 100%
            height: 100%
            border-radius: 50%
            background-color: #6ca4ef
            // background-color: #67CF22
            opacity: 0.3
            position: absolute
            top: 0
            left: 0
            animation: bounce 2.0s infinite ease-in-out
            &:last-child
                animation-delay: -1.0s

        @keyframes bounce
            0%, 100%
                transform: scale(0)
                -webkit-transform: scale(0)

            50%
                transform: scale(1)
                -webkit-transform: scale(1)
</style>
